<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>首页数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/data/medicalRecord.js"></script>
<style type="text/css">
/* 标杆、日期选择框 */
#date_div{
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	background:#e9e8e6;
	border-left:6px solid #f60;
	min-width:258px;
	float:right;
	transition:all .3s;
	-webkit-transition:all .3s;
	position: relative;
	top: 0;
	overflow: hidden;
	transform-origin:right center;
	margin-top: 5px;
}
*,html,body{
	font-family:microsoft yahei;
}
.month{
	width:100%;
	height:120px;
	border:1px solid #E0E0E0;
	text-align: center;
	position: relative;
	background: white;
	-webkit-transition:box-shadow .4s;
	-moz-transition:box-shadow .4s;
	-ms-transition:box-shadow .4s;
	transition:box-shadow .4s;
}
.monthNum{
	font-size: 40px;
	color: gray;
}
.enable-month{box-shadow:2px 2px 10px #888;}
.enable-month .monthNum{
	font-size: 40px;
	color: orange;
}
.newIcon{
	display:none;
	position: absolute;
	top:-3px;
	right:-4px;
}
.month .importIcon{
	display:none;
	position: absolute;
	width:100px;
	bottom:5px;
	left:5px;
	font-size: 15px;
}
.importIcon .fa-spin{font-size: 28px;}
</style>
</head>
<body>
<div class="container-fluid">
	<div class="row" style="position: relative;">
	      <div class="col-md-4 col-md-offset-4">
	     		<h2 style="display: inline-block;width:400px;text-align: center;position: absolute;left: 50%;margin-left:-200px;">病例数据</h2>
	     </div>
	     <div class="col-md-2" style="margin-top: 18px;font-size: 18px;">
	     <i class="icon-refresh"></i>
	     </div>
   	      <div class="col-md-2">
   	     	 <div id="date_div" style="margin-bottom: 20px;">
			<img src="images/co_search.png" style="float: right; height: 44px; display: block;">
			<input id="medicalRecordYear" type="text" class="form-control" style="width:200px;margin:5px;font-size: 20px;text-align: center;height:35px;background: white;cursor: text;" readonly="readonly">
			
		</div>
	     </div>
		
	</div>
	
	<div class="row">
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="1month">
				<h4>1月</h4>
				<a class="monthNum" title="查看详细病例" data-month="01">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="2month">
				<h4>2月</h4>
				<a class="monthNum" title="查看详细病例" data-month="02">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="3month">
				<h4>3月</h4>
				<a class="monthNum" title="查看详细病例" data-month="03">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="4month">
				<h4>4月</h4>
				<a class="monthNum" title="查看详细病例" data-month="04">0</a>例
			</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:30px;">
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="5month">
				<h4>5月</h4>
				<a class="monthNum" title="查看详细病例" data-month="05">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="6month">
				<h4>6月</h4>
				<a class="monthNum" title="查看详细病例" data-month="06">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="7month">
				<h4>7月</h4>
				<a class="monthNum" title="查看详细病例" data-month="07">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="8month">
				<h4>8月</h4>
				<a class="monthNum" title="查看详细病例" data-month="08">0</a>例
			</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:30px;">
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="9month">
				<h4>9月</h4>
				<a class="monthNum" title="查看详细病例" data-month="09">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="10month">
				<h4>10月</h4>
				<a class="monthNum" title="查看详细病例" data-month="10">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="11month">
				<h4>11月</h4>
				<a class="monthNum" title="查看详细病例" data-month="11">0</a>例
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="month enable-month" id="12month">
				<h4>12月</h4>
				<a class="monthNum" title="查看详细病例" data-month="12">0</a>例
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	//日期选择器
	$("#medicalRecordYear").datetimepicker({
	       format: "yyyy",
	       autoclose: true,
	       todayBtn: true,
	       minView: 4,
	       startView:4,
	       language: 'zh-CN'
	   });
</script>
</body>
</html>